<template>
	<view style='padding-bottom: 200rpx;'>
		<u-navbar title='监控' :autoBack="true" leftIconColor="#1E272E" bgColor="transparent"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<view class="bgHome"></view>
		<view class="videoList">
			<view class="search">
				<u-icon name="search" size='24' color="#c9c9c9"></u-icon>
				<u-input v-model="keyword" @blur='searchHandler' customStyle="height:78rpx" placeholder="请输入您想要搜索的内容"></u-input>
			</view>
			<view v-if="videoList.length>0">
			<view class="item" v-for="(v,i) in videoList" :key="i" >
				<video :autoplay="false" v-if='v.videoUrl && show':src="v.videoUrl" style="width: 700rpx;height: 395rpx;"></video>
				<view v-else>
					<image src='https://renovationcdn.jiachuangnet.com/novideo.jpg'  style="width: 700rpx;height: 305rpx"></image>
					<view style="text-align: center;height: 90rpx;line-height: 90rpx;color:#e6e6e6">当前店铺暂无实时画面</view>
				</view>
				<view style="padding: 30rpx 20rpx;font-size: 32rpx;font-weight: 700;;border-top:0.5px solid #eee;">{{v.assignName}}</view>
			</view>
			</view>
		</view>
		<view style="border-top:0.5px solid #eee;width: 500rpx;margin-top:50rpx;padding:25rpx 125rpx;">
			<uni-pagination pageSize="5"  @change='searchHandler' :v-model="pageNumber" :total="total" />
		</view>
	</view>
</template>
<script>
	let app = getApp();
	import newTabbar from '@/components/newTabbar/index.vue';
	export default{
		components:{
			newTabbar
		},
		data(){
			return{
				keyword:'',
				pageSize:5,
				pageNumber:1,
				videoList:[],
				show:true,
				total:0,
			}
		},
		onShow(){
			this.show = true;
			this.searchHandler();
		},
		onHide(){
			this.show = false;
			this.videoList = [];
		},
		methods:{
			searchHandler(){
				this.videoList = [];
				uni.$u.http.get('/camera/getCameraSerial', {
					 params:{
						pageSize:this.pageSize,
						pageNumber:this.pageNumber,
						assignName:this.keyword
					 }
				}).then(res=>{
					this.total = res.total
					this.videoList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgHome{
		height: 360rpx;
		width: 750rpx;
		background: linear-gradient(135deg, #029DD9, #01CF9C);
	}
	.videoList{
		width: 700rpx;
        margin:0 auto;
		margin-top:-150rpx;
	}
	.item{
		width: 700rpx;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		overflow: hidden;
	}
	.search{
		width: 650rpx;
		padding:0 25rpx;
		height: 78rpx;
		background-color: white;
		border-radius: 78rpx;
		display: flex;
		align-items: center;
		
	}
</style>